<template>
    <!-- 无图书时 -->
    <template v-if="bookList.length == 0">
        <div class="no-data" v-loading="loading">
            <div class="no-data-left-top">
                <template v-if="menuType == menuTypeEnum.All">
                    <h2>全部图书，当前暂无图书</h2>
                    <h2>可通过在点击右上角按钮，上传图书</h2>
                </template>
                <template v-else-if="menuType == menuTypeEnum.Favorite">
                    <h2>您的喜爱里，暂无图书</h2>
                    <h2>可通过在全部图书中对图书操作添加到喜爱</h2>
                </template>
                <template v-else-if="menuType == menuTypeEnum.RecycleBin">
                    <h2>您的回收站，暂无图书</h2>
                    <h2>被删除的图书会出现在这里</h2>
                </template>
                <template v-else-if="menuType == menuTypeEnum.Shelf">
                    <h2>您的书架，暂无图书</h2>
                    <h2>可通过在全部图书中对图书操作添加到书架</h2>
                </template>
            </div>
            <div class="no-data-right-bottom">
                <img :src="getAssetsFile('read_people_bg.png')" alt="读书图片">
            </div>
        </div>
    </template>
    <!-- 有图书时 -->
    <template v-else>
        <bookListCom v-model="bookList" :menuType="menuType" :shelfKey="shelfKey" />
    </template>
</template>
<script setup lang="ts">
import { getAssetsFile, isObject } from '@/utils/tools.ts'
import { useRoute } from 'vue-router'
import indexedDB from '@/utils/indexedDB'
import { useBookStore, useCatalogStore } from '@/modules/manager/stores';
import { Book, BookInfoAndReadRecord } from '@/types/book';
import { menuTypeEnum } from '@/types/book';
import bookListCom from '@/components/bookList/bookList.vue'

const bookStore = useBookStore()
const route = useRoute();
let bookList = ref<BookInfoAndReadRecord[]>([]);
const menuType = ref<menuTypeEnum>(menuTypeEnum.All)
const loading = ref(false)
const shelfKey = ref('')
 
const initData = (type: string): void => {
    loading.value = true
    let bookKeys: string[] = [];
    if (type == 'all') {
        menuType.value = menuTypeEnum.All
    } else if (type == 'favorite') {
        menuType.value = menuTypeEnum.Favorite
        bookKeys = bookStore.favoriteBooks
    } else if (type == 'recycleBin') {
        menuType.value = menuTypeEnum.RecycleBin
        bookKeys = bookStore.deletedBooks
    } else if (type && type != '') { //书架 文件夹
        menuType.value = menuTypeEnum.Shelf
        shelfKey.value = type;
        const shelfItem = useCatalogStore().catalogs?.find(item => item.key == type);
        bookKeys = shelfItem?.books || [];
    }
    bookList.value = [];

    indexedDB.get('books').then(books => {
        // 当前这个表存在
        if (books && Array.isArray(books)) {
            if (type == 'all') {
                // 要去掉在回收站的图书
                const deletedBooks = bookStore.deletedBooks;
                if (deletedBooks.length > 0) {
                    books.forEach(item => {
                        if (!deletedBooks.includes(item.key)) {
                            bookList.value.push(formatBookList(item))
                        }
                    })
                } else {
                    bookList.value = books.map(item => formatBookList(item))
                }
            } else {
                // 匹配 我的喜爱/我的回收/书架文件夹中的图书
                if (bookKeys.length > 0) {
                    for (let i = 0; i < books.length; i++) {
                        if (bookKeys.some(key => key == books[i].key)) {
                            bookList.value.push(formatBookList(books[i]))
                        }
                    }
                }
            }
            loading.value = false
        }

    }).catch(() => {
        loading.value = false
        bookList.value = []
    })
}
const formatBookList = (item: Book) => {
    return {
        name: item.name,
        key: item.key,
        cover: item.cover,
        format: item.format,
        percentage: isObject(bookStore.recordLocation) ? bookStore.recordLocation[item.key].percentage : '0'
    }
}
watch(
    () => route.params?.fileType,
    (newValue) => {
        initData(newValue as string)
    }
)

onMounted(() => {
    const type = (route.params?.fileType as string) || 'all'
    initData(type)
})
</script>
<style scoped lang="scss">
.no-data {
    position: relative;
    width: 100%;
    height: 100%;
}

.no-data-left-top h2:last-child {
    width: 30%;
    color: #a8abb2;
}

.no-data-right-bottom {
    position: absolute;
    bottom: 20px;
    right: 20px;

    img {
        width: 400px;
        height: 340px;
    }
}
</style>